<template>
  <div v-if="user" class="user-center-page">

    <van-cell-group inset class="user-header-card">
      <div style="display: flex;align-items: center;margin-left: 20px">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <van-image
            round
            width="60"
            height="60"
            fit="cover"
            :src="user.avatarUrl"
        />
        <div style="margin-left: 10px">
          <div style="margin-bottom: 5px">{{user.username ? user.username : '未命名'}}</div>
          <div style="display:flex;align-items: center">
            <van-tag mark type="warning" v-if="user.userStatus == 2">LV会员</van-tag>
            <van-tag mark type="warning" v-else>非会员</van-tag>
            <van-image src="http://120.26.146.100:8889/public/member.png" style="width: 20px;height: 20px" v-if="user.userStatus == 2"/>
            <van-image src="http://120.26.146.100:8889/public/nomember.png" style="width: 20px;height: 20px" v-else/>
          </div>
        </div>
      </div>
<!--      <van-cell title="头像" is-link @click="toEditPage('avatarUrl','头像',user?.avatarUrl)">-->
<!--      </van-cell>-->
    </van-cell-group>

    <van-cell-group inset class="user-menu-card">
      <div style="display:flex;flex:1;flex-direction: column;justify-items: center;align-items: center" @click="toMemberCenter">
        <van-image src="http://120.26.146.100:8889/public/memberCenter.png" style="width: 40px;height: 40px;margin-bottom: 3px"/>
        <div style="font-size: 12px">会员中心</div>
      </div>
      <div style="display:flex;flex:1;flex-direction: column;justify-items: center;align-items: center">
        <van-image src="http://120.26.146.100:8889/public/teamCenter.png" style="width: 40px;height: 40px;margin-bottom: 3px" @click="toTeamCenter"/>
        <div style="font-size: 12px">聊天空间</div>
      </div>
      <div style="display:flex;flex:1;flex-direction: column;justify-items: center;align-items: center" @click="toBoKeCenter">
        <van-image src="http://120.26.146.100:8889/public/boke.png" style="width: 39px;height: 39px;margin-bottom: 4px"/>
        <div style="font-size: 12px">我的博客</div>
      </div>
    </van-cell-group>

    <van-cell-group inset class="user-info-card">
      <van-cell title="账号"  :value="user.userAccount" />
      <van-cell title="编号"   :value="user.planetCode"/>
      <van-cell title="性别"  :value="user.gender === 0 ? '男' : '女'" @click="toEditPage('gender','性别')"/>
      <van-cell title="邮箱"  :value="user.email" @click="toEditPage('email','邮箱')"/>
      <van-cell title="手机号码"  :value="user.phone" @click="toEditPage('phone','手机号码')"/>
      <van-cell title="角色"   :value="user.userRole === 0 ? '普通成员' : '管理员'"/>
      <van-cell title="用户类型"  :value="getUserTypeText" @click="toComplexEditPage('user_type','用户类型')"/>
      <van-cell title="会员等级"  :value="getMemberLevelText" />
      <van-cell title="协作信用分"  :value="user.collab_credit || 5.0" />
      <van-cell title="个人简介">
        <van-text-ellipsis
            rows="3"
            :content="user.personalProfile"
            expand-text="展开"
            collapse-text="收起"
        />
      </van-cell>


      <van-collapse v-model="tagActive" accordion>
        <van-collapse-item name="1">
          <template #title>
            <div style="display: flex;align-items: center">
              <svg style="margin-right: 2px" t="1724080369563" class="icon" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="2335" width="15" height="15">
                <path d="M163.229994 1023.786711c-19.537263 0-37.197584-7.934347-49.738971-22.224703-11.389627-13.053281-17.404374-30.031077-17.404374-49.141762V85.315559c0-47.051531 38.264028-85.315559 85.315559-85.315559h682.524474c47.051531 0 85.315559 38.264028 85.315559 85.315559v867.062029c0 40.652864-28.794001 71.323808-66.972714 71.323808-10.707103 0-21.499521-2.431493-32.035992-7.12385l-304.149969-178.48015c-7.251823-3.241991-36.173797-3.369965-43.340304-0.127973L195.052697 1016.748177a77.637159 77.637159 0 0 1-31.822703 7.038534zM181.402208 85.315559v844.197459l286.788252-169.522016c20.006499-8.872818 41.50602-10.74976 56.009665-10.749761 14.674276 0 36.429744 1.9196 56.692189 10.96305l283.077026 169.05278V85.315559H181.402208z" fill="#000000" p-id="2336">
                </path>
              </svg>
              <span>查看标签</span>
            </div>
          </template>

          <!-- 下拉后展示区域 -->
          <div>
            <span v-for="tag in tags" style="margin-right: 4px">
              {{tag}}
            </span>
          </div>

        </van-collapse-item>
      </van-collapse>


    </van-cell-group>

    <van-cell-group inset class="user-settings-card">
      <van-cell title="修改头像" is-link @click="toEditPage('avatarUrl','头像')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 4px">
            <svg t="1723979862136" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="12056" width="15" height="15">
              <path d="M512 420.34176c-99.9424 0-181.248 81.31584-181.248 181.248s81.31584 181.248 181.248 181.248 181.248-81.31584 181.248-181.248-81.3056-181.248-181.248-181.248z" fill="#333333" p-id="12057"></path><path d="M897.536 132.54656h-78.848l-2.56-9.09312C804.66944 54.016 752.44544 0 689.02912 0H334.97088c-63.41632 0-115.64032 54.016-127.80544 126.72l-1.72032 5.82656H126.464C56.18688 132.54656 0 192.45056 0 265.41056v625.664C0 964.096 56.18688 1024 126.464 1024h771.072c70.27712 0 126.464-59.96544 126.464-132.92544v-625.664c0-72.96-56.18688-132.864-126.464-132.864zM700.6208 790.2208a266.74176 266.74176 0 1 1 78.1312-188.6208 265.0112 265.0112 0 0 1-78.1312 188.6208zM845.43488 286.72H731.4432a42.752 42.752 0 0 1 0-85.49376h113.99168a42.752 42.752 0 0 1 0 85.49376z" fill="#333333" p-id="12058"></path>
            </svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="修改昵称" icon="setting-o" is-link @click="toEditPage('username','昵称')"/>
      <van-cell title="修改密码" is-link @click="toEditPage('userPassword','密码')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg t="1723980018444" class="icon" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6077" width="18" height="18">
              <path d="M800 479.78v384H224v-384h576m39.68-96H184.32c-31.11 0-56.32 25.21-56.32 56.32v463.36c0 31.11 25.21 56.32 56.32 56.32h655.36c31.11 0 56.32-25.21 56.32-56.32V440.1c0-31.11-25.21-56.32-56.32-56.32zM752.02 383.77h-96v-64c0-79.41-64.62-144-144-144s-144 64.59-144 144v64h-96v-64c0-132.34 107.69-240 240-240s240 107.66 240 240v64z" fill="#131414" p-id="6078"></path><path d="M512.02 783.77c-26.5 0-48-21.5-48-48v-128c0-26.5 21.5-48 48-48s48 21.5 48 48v128c0 26.5-21.5 48-48 48z" fill="#131414" p-id="6079"></path>
            </svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="修改个人简介" is-link @click="toEditPage('personalProfile','个人简介')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg t="1723993360666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="13088" width="17" height="17">
              <path d="M325.31032074 660.85464074h376.14104018c20.71261235 0 37.55887038 16.84625804 37.55887039 37.55887037s-16.84625804 37.55887038-37.55887039 37.55887038H325.31032074c-20.71261235 0-37.55887038-16.84625804-37.5588704-37.55887038s16.70817396-37.55887038 37.5588704-37.55887037z m0-376.27912429h150.51164969c20.71261235 0 37.55887038 16.84625804 37.55887039 37.55887038s-16.84625804 37.55887038-37.55887039 37.55887039h-150.51164969c-20.71261235 0-37.55887038-16.84625804-37.5588704-37.55887039-0.13808409-20.71261235 16.70817396-37.55887038 37.5588704-37.55887038z m0 188.07052008h376.14104018c20.71261235 0 37.55887038 16.84625804 37.55887039 37.5588704s-16.84625804 37.55887038-37.55887039 37.55887039H325.31032074c-20.71261235 0-37.55887038-16.84625804-37.5588704-37.55887039-0.13808409-20.71261235 16.70817396-37.55887038 37.5588704-37.5588704z m-150.51164972-451.39686504h504.14498448l248.27517999 225.76747458v677.16433962c0 41.56330877-33.69251609 75.25582486-75.25582486 75.25582484H174.79867102c-41.56330877 0-75.25582486-33.69251609-75.25582487-75.25582484V96.50499635c0-41.56330877 33.69251609-75.25582486 75.25582487-75.25582486z m677.71667595 301.02329942v-37.55887038l-151.06398605-134.07964393v171.63851431h151.06398605z m0 75.25582486h-189.17519276c-20.71261235 0-37.55887038-16.84625804-37.55887039-37.55887038 0-2.20934532 0.13808409-4.41869063 0.55233633-6.62803596v-256.83639308h-414.25224691c-20.71261235 0-37.55887038 16.84625804-37.55887039 37.55887038v752.42016447c0 20.71261235 16.84625804 37.55887038 37.55887039 37.5588704h602.87510335c20.71261235 0 37.55887038-16.84625804 37.55887038-37.5588704V397.52829577z" fill="#000000" p-id="13089">

            </path></svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="修改标签" is-link @click="toEditPage('tags','标签')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg style="margin-right: 2px" t="1724080369563" class="icon" viewBox="0 0 1024 1024"
                 version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2335" width="15" height="15">
              <path d="M163.229994 1023.786711c-19.537263 0-37.197584-7.934347-49.738971-22.224703-11.389627-13.053281-17.404374-30.031077-17.404374-49.141762V85.315559c0-47.051531 38.264028-85.315559 85.315559-85.315559h682.524474c47.051531 0 85.315559 38.264028 85.315559 85.315559v867.062029c0 40.652864-28.794001 71.323808-66.972714 71.323808-10.707103 0-21.499521-2.431493-32.035992-7.12385l-304.149969-178.48015c-7.251823-3.241991-36.173797-3.369965-43.340304-0.127973L195.052697 1016.748177a77.637159 77.637159 0 0 1-31.822703 7.038534zM181.402208 85.315559v844.197459l286.788252-169.522016c20.006499-8.872818 41.50602-10.74976 56.009665-10.749761 14.674276 0 36.429744 1.9196 56.692189 10.96305l283.077026 169.05278V85.315559H181.402208z" fill="#000000" p-id="2336">
              </path>
            </svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="设置技能认证" is-link @click="toComplexEditPage('skillCert','技能认证')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg t="1723993360666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" width="17" height="17">
              <path d="M877.52 253.48l-27.78-27.78a31.99 31.99 0 0 0-45.26 0L644.42 358.25 365.78 76.57a31.99 31.99 0 0 0-45.26 0l-27.78 27.78a31.99 31.99 0 0 0 0 45.26L599.15 403.5 37.65 865.06c-12.37 12.37-12.37 32.46 0 44.83l27.78 27.78a31.99 31.99 0 0 0 45.26 0l501.17-501.17 132.05 132.05c12.37 12.37 32.46 12.37 44.83 0l27.78-27.78a31.99 31.99 0 0 0 0-45.26L684.73 403.5l132.05-132.05c12.37-12.37 12.37-32.46 0-45.26z" fill="#333333"></path>
            </svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="设置时间可用性" is-link @click="toComplexEditPage('availTime','时间可用性')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg t="1723993360666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" width="17" height="17">
              <path d="M512 0C229.28 0 0 229.28 0 512s229.28 512 512 512 512-229.28 512-512S794.72 0 512 0zm0 972.8c-254.272 0-460.8-206.528-460.8-460.8S257.728 51.2 512 51.2 972.8 257.728 972.8 512 766.272 972.8 512 972.8zm153.6-435.2a38.4 38.4 0 0 1-38.4 38.4H460.8V691.2a38.4 38.4 0 1 1-76.8 0V576H396.8a38.4 38.4 0 1 1 0-76.8h220.8a38.4 38.4 0 0 1 38.4 38.4z" fill="#333333"></path>
            </svg>
          </div>
        </template>
      </van-cell>
      <van-cell title="设置协作偏好" is-link @click="toComplexEditPage('collabPrefer','协作偏好')">
        <template #icon>
          <div style="display: flex;align-items: center;margin-right: 3px">
            <svg t="1723993360666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" width="17" height="17">
              <path d="M877.52 346.48c-25.6-25.6-65.28-25.6-90.88 0l-380.16 380.16c-12.8 12.8-33.28 12.8-46.08 0L137.36 563.44c-25.6-25.6-65.28-25.6-90.88 0s-25.6 65.28 0 90.88l173.92 173.92c57.344 57.344 149.504 57.344 206.848 0l380.16-380.16c25.6-25.6 25.6-65.28 0-90.88z" fill="#333333"></path>
              <path d="M886.08 137.92c-25.6-25.6-65.28-25.6-90.88 0s-25.6 65.28 0 90.88l173.92 173.92c57.344 57.344 57.344 149.504 0 206.848l-106.496 106.496c-12.8 12.8-33.28 12.8-46.08 0s-12.8-33.28 0-46.08l106.496-106.496c25.6-25.6 25.6-65.28 0-90.88L759.6 228.8c-12.8-12.8-12.8-33.28 0-46.08s33.28-12.8 46.08 0l106.496 106.496c25.6 25.6 65.28 25.6 90.88 0s25.6-65.28 0-90.88l-173.92-173.92z" fill="#333333"></path>
            </svg>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <div class="logout-btn-container">
      <van-button round size="normal" type="primary" block @click="quit">退出登录</van-button>
    </div>

  </div>


</template>


<script setup lang="ts">
//数据库中获取
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {userStore} from "../stores/user/user.ts";
import {quitLogin} from "../api/userApi.ts";
import {removeToken} from "../request/request.ts";
import {computed} from "vue";


const router = useRouter();
const userStoreAPI = userStore();
const user = ref();

const tagActive = ref('0');
const tags = ref();

// 计算用户类型文本
const getUserTypeText = computed(() => {
  if (!user.value || user.value.user_type === undefined) return '未设置';
  const typeMap = ['学生', '职场人', '自由职业者'];
  return typeMap[user.value.user_type] || '未设置';
});

// 计算会员等级文本
const getMemberLevelText = computed(() => {
  if (!user.value || user.value.member_level === undefined) return '普通用户';
  const levelMap = ['普通用户', '青铜会员', '黄金会员'];
  return levelMap[user.value.member_level] || '普通用户';
});

//跳转到普通编辑页面
const toEditPage = (editKey:string,editName:string)=>{
  if (editKey == 'tags'){
    return;
  }
  router.push({
    path:'/user/edit',
    query:{
      id: user.value.id,
      key : editKey,
      name: editName,
    }
  });
}

//跳转到复杂编辑页面（用于JSON字段）
const toComplexEditPage = (editKey:string,editName:string)=>{
  router.push({
    path:'/user/complex-edit',
    query:{
      key : editKey,
      name: editName,
    }
  });
}

//跳转到会员中心
const toMemberCenter = ()=>{
  router.push('/memberCenter');
};



//跳转到博客中心
const toBoKeCenter = ()=>{
  router.push('/bokeCenter');
};


//跳转到队伍中心
const toTeamCenter = ()=>{
  router.push('/chatCenter')
}

//退出登录
const quit = async ()=>{
  const res = await quitLogin();
  if (200 === res.code || res.code === 0){
    // 清除 token
    removeToken();
    // 清除用户信息
    userStoreAPI.setCurrentUser(null);
    router.replace('/');
  }
};


onMounted(async ()=>{
  //去pina拿数据 //阻塞拿到数据，因为刷新页面pina可能就没数据，发送请求时，异步了，所有变成一定的阻塞
  user.value = await userStoreAPI.getCurrentUser();
  console.log('currentUser',user.value);
  if (user.value.tags != null){
    tags.value = JSON.parse(user.value.tags);
  }
  // 初始化默认值
  if (user.value && user.value.collab_credit === undefined) {
    user.value.collab_credit = 5.0;
  }
  if (user.value && user.value.user_type === undefined) {
    user.value.user_type = 0;
  }
  if (user.value && user.value.member_level === undefined) {
    user.value.member_level = 0;
  }
});

</script>

<style scoped>
.user-center-page {
  background-color: #f7f8fa;
  padding-top: 16px;
  min-height: 100vh;
  padding-bottom: 24px;
}

.user-header-card {
  height: 90px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px 16px;
  padding: 0 20px;
}

.user-menu-card {
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-items: center;
  height: 90px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px 16px;
  padding: 12px 0;
}

.user-info-card {
  margin-top: 0;
  margin-bottom: 16px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px 16px;
}

.user-settings-card {
  margin-top: 0;
  margin-bottom: 16px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 0 16px 16px;
}

.logout-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 0 16px;
}

/* 确保van-cell-group内部的样式 */
:deep(.van-cell-group--inset) {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

:deep(.van-cell) {
  background-color: #fff;
  padding: 14px 16px;
}

:deep(.van-cell__title) {
  font-size: 15px;
}

:deep(.van-cell__value) {
  font-size: 14px;
}
</style>